<template>
        <el-dialog 
           title="新增用户"
           :visible.sync="addUserDialogVisible"
           size='large'
           :lock-scroll='false'
           top='5vh'
           custom-class='adduser-dialog'
         >
            <div class="adduser" >

               <section class="search">
                 <el-input
                  v-model='searchValue'
                  placeholder="请输入8位员工姓名编号或姓名查询"
                  style='width:500px'>
                 </el-input>
                 <el-button class="search-button" @click='search'>查询</el-button>

               </section>            



               <section class="adduser-table">
                 
                <el-table 
                  :data='tableData'
                  stripe
                  border
                  fit	
                  style="width: 350%">
                  
                    <el-table-column type="index" label='#' width="50">

                    </el-table-column>
                    
                  
                    <el-table-column label='员工编号' property="emplid" width='140'>

                    </el-table-column>
                    
                    <el-table-column label='姓名' property='name' width='140'>

                    </el-table-column>



                    <el-table-column label='职位' property='position_desc'>

                    </el-table-column>

                    <el-table-column label='操作' width='200'>
                      <template slot-scope="scope">

                       <el-button
                         class="fa fa-refresh"
                         @click.stop='handleSync(scope.row)' 
                        :key='scope.$index'>&nbsp; 同步账号</el-button>
                      </template>

                    </el-table-column>

                </el-table> 
                 
               </section>   

               <section class="pagination-block" v-if='page'>
                <span class="info">共 {{page.total}}条记录，当前显示第 {{(page.pageNum-1)==0?1:(page.pageNum-1)*page.pageSize+1}} 到第 {{(page.pageNum * page.pageSize) - page.total>=1?(page.pageNum * page.pageSize) - (page.pageNum * page.pageSize - page.total):page.pageNum * page.pageSize}} 条记录</span>
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.pageNum"
                    :page-sizes="[10, 20, 50, 200]"
                     :page-size="page.pageSize"
                    layout="sizes, prev, pager, next, jumper,slot"
                    :total='page.total'
                    >
                  </el-pagination>               
                 </section> 

            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="changeVisible">取 消</el-button>
            </span>
    
        </el-dialog>
</template>

<script>
import Vue from 'vue';
import {
	Checkbox,
	CheckboxGroup,
	Button,
	Dialog,
	Notification,
	Table,
	TableColumn,
	Pagination
} from 'element-ui';
import URL from '@/common/js/adminUrl';
Vue.use(Pagination)
Vue.use(Checkbox)
Vue.use(CheckboxGroup)
Vue.use(Button)
Vue.use(Dialog)
Vue.use(Table)
Vue.use(TableColumn)
export default {
	created () {
		Bus.$on('新增用户', data => (this.addUserDialogVisible = data.adduser))
	},

	data () {
		return {
			addUserDialogVisible: false,
			res: '',
			searchValue: '',
			saveFlag: false,
			tableData: [],
			pageSizeVal: '',
			page: null,
			searchValue: null
		}
  },
	methods: {
		handleSync (index) {
			let params = {
				employeeId: index.emplid
			}

			this.Axios.Post(URL.syncEmployee.url, params)
				.then((res) => {
					if (res.status == 200) {
						Notification({
							title: '同步成功',
							type: 'success',
							offset: '1'
						})

						let params = {
							employeeIdOrName: this.searchValue,
							pageNum: this.page.pageNum,
							pageSize: this.page.pageSize
						}

						this.Axios.Post(URL.relationEmp.url, params).then((res) => {
							this.tableData = res.data.datas
              this.page = res.data.page
						})


					} else {
						Notification({
							title: '同步失败,请重试',
							type: 'error',
							offset: '1'
						})
					}
				})

		},
		search () {

			let params = {
				employeeIdOrName: this.searchValue,
				pageNum: 1,
				pageSize: 5
			}

			this.Axios.Post(URL.relationEmp.url, params).then((res) => {
				this.tableData = res.data.datas
        this.page = res.data.page
			})

			this.searchFlag = this.searchValue ? this.searchValue : false
		},

		handleSizeChange (val) {

			this.pageSizeVal = val

      let params = {
				pageNum: 5,
				pageSize: val,
				employeeIdOrName: this.searchFlag || ''
			}

			this.Axios.Post(URL.relationEmp.url, params).then((res) => {
				this.tableData = res.data.datas
				this.page = res.data.page

			})


		},
		handleCurrentChange (val) {


			let params = {
				pageNum: val,
				pageSize: this.pageSizeVal || 5,
				employeeIdOrName: this.searchFlag || ''
			}



			this.Axios.Post(URL.relationEmp.url, params).then((res) => {
				this.tableData = res.data.datas
        this.page = res.data.page
			})

		},



		changeVisible () {
			this.saveFlag = false
      this.addUserDialogVisible = false
    }

	},

}
</script>

<style lang='less'>
.adduser-dialog {
  width: 78% !important;
  overflow-x: hidden;
}

.adduser-dialog .search {
  padding-bottom: 30px;
  border-bottom: 1px solid #eee;
  .search-button {
    position: relative;
    top: 1px;
  }
}

.adduser-dialog .adduser-table {
  .el-table__empty-block {
    border-left: 1px solid #dfe6ec !important;
  }
  .el-table_1_column_6 {
    border-left: 1px solid #dfe6ec !important;
  }
}

.adduser-dialog .pagination-block {
  margin-top: 22px;
  display: flex;
  align-items: center;
}
.adduser-dialog .pagination-block .el-pagination {
  margin-top: 0;
}
.adduser-dialog .pagination-block .info {
  margin: 0 50px 0 20px;
}
.adduser-dialog .pagination-block .el-pagination__sizes {
  margin-top: -2px;
}
</style>